<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
    <div id="app">
        <!-- .prevent 阻止事件处理函数内部 -->
        <form @submit.prevent='onSubmit'>
            <input type="text" name="content" />
            <button type="submit">submit</button>
        </form>
        <!-- .once 只调用一次事件处理函数，调用一次之后自动移除监听 -->
        <button @click.once="doOnce">once</button>
    </div>
    <script type="text/javascript">
        /**
         * 事件修饰符
         * @ click.once
         * 目的在于把事件处理函数中的非纯逻辑的程序分离出去
         * 修饰符连用的情况下，一定要注意顺序问题 
         **/
        var vm = new Vue({
            el: '#app',
            data() {
                return {

                }
            },
            computed: {

            },
            mounted() {

            },
            methods: {
                onSubmit() {
                    console.log(123)
                },
                doOnce() {
                    console.log('once')
                }
            }
        })
    </script>
</body>

</html>